<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
</head>
<body>
<ul>
    <li>
        @keyframes 指定动画名称 及 动画过渡效果

        <ul>
            <li>form {} to {}</li>
            <li>xx% {} </li>
        </ul>
    </li>
    <li>animation-name	规定 @keyframes 动画的名称。</li>
    <li>
        animation-duration 过渡效果的事件， 单位 秒s / 毫秒ms
    </li>
    <li>
        animation-timing-function  属性指定切换效果的速度。
        <ul>
            <li>linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</li>
            <li>ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</li>
            <li>ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</li>
            <li>ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</li>
            <li>ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</li>
            <li>cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</li>
        </ul>
    </li>
    <li>
        animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
    </li>
    <li>
        transition-delay  指定何时将开始切换效果。 比如几秒后开始， 单位 秒s / 毫秒ms
    </li>
    <li>
        animation-iteration-count	规定动画被播放的次数。默认是 1。
        <ul>
            <li>n 次</li>
            <li>infinite 无限次</li>
        </ul>
    </li>
    <li>
        animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。

        <ul>
            <li>reverse	动画反向播放。</li>
            <li>alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。</li>
            <li>alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。</li>
        </ul>
    </li>
    <li>
        animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

        <ul>
            <li>paused	指定暂停动画</li>
            <li>running	指定正在运行的动画</li>
        </ul>
    </li>
</ul>


<style>
    div
    {
        width:100px;
        height:100px;
        background:red;
        position:relative;
        animation-name:myfirst;
        animation-duration:5s;
        animation-timing-function:linear;
        animation-delay:2s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        animation-play-state:running;
    }

    @keyframes myfirst {
        0%   {background:red; left:0px; top:0px;}
        25%  {background:yellow; left:200px; top:0px;}
        50%  {background:blue; left:200px; top:200px;}
        75%  {background:green; left:0px; top:200px;}
        100% {background:red; left:0px; top:0px;}
    }
</style>

<div></div>
</body>
</html>
